<h1>{{#if access.id}}编辑资源{{else}}添加资源{{/if}}</h1>
<form action="/admin/accesses{{#if access.id}}/{{access.id}}{{/if}}" method="POST">
    {{#if access.id}}<input type="hidden" name="_method" value="PUT">{{/if}}
    <div class="mb-3">
        <label for="name" class="form-label">名称</label>
        <input type="text" class="form-control" id="name" name="name" value="{{access.name}}">
    </div>
         <div class="mb-3">
            <label for="code" class="form-label">编码</label>
            <input type="text" class="form-control" id="code" name="code" value="{{access.code}}">
        </div>
    <div class="mb-3">
        <label for="url" class="form-label">url</label>
        <input type="text" class="form-control" id="url" name="url" value="{{access.url}}">
    </div>
    <div class="mb-3">
        <label for="description" class="form-label">描述</label>
        <input type="text" class="form-control" id="description" name="description" value="{{access.description}}">
    </div>
    <div class="mb-3">
        <label for="name" class="form-label">类型</label>
        <select class="form-control" id="type" name="type">
            <option value="module" {{#if (eq access.type 'module' )}}selected{{/if}}>模块</option>
            <option value="menu" {{#if (eq access.type 'menu' )}}selected{{/if}}>菜单</option>
            <option value="page" {{#if (eq access.type 'page' )}}selected{{/if}}>页面</option>
            <option value="button" {{#if (eq access.type 'button' )}}selected{{/if}}>按钮</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="name" class="form-label">父权限</label>
        <div id="parentTree" class="border rounded p-3"></div>
    </div>
    <div class="mb-3">
        <label for="status" class="form-label">状态</label>
        <select class="form-control" id="status" name="status">
            <option value="1" {{#if access.status}}selected{{/if}}>激活</option>
            <option value="0" {{#unless access.status}}selected{{/unless}}>未激活</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">保存</button>
</form>
<script>
    const accessTree = {{{ json accessTree }}};
    const selectedParentId = {{{def access.parent.id}}}
    const accessId =  {{{def access.id}}}
    function renderTree(accesses) {
        let html = `<ul class="list-unstyled">`;
        accesses.forEach(function (access) {
            if(access.id === accessId)return;
            html += `
          <li class="mb-2">
            <div class="d-flex align-items-center">
               ${access.children?.length > 0 ? '<span class="toggle me-2 cursor-pointer"><i class="bi bi-folder-minus"></i></span>' : '<span class="me-4"></span>'}
                <label class="form-check-label">
                  <input type="radio" class="form-check-input" ${access.id === selectedParentId?'checked':''} name="parentId" value="${access.id}"/>
                  ${access.name}
                </label>
            </div>
            ${access.children?.length > 0 ? `<div class="children ms-4">${renderTree(access.children)}</div>` : ``}
          </li>
        `;
        });
        html += '</ul>';
        return html;
    }
    $(function () {
        $('#parentTree').html(renderTree(accessTree));
        $('body').on('click', '.toggle', function () {
            const children = $(this).parent().siblings('.children');
            if(children.is(':visible')){
                children.hide();
                $(this).html(`<i class="bi bi-folder-plus"></i>`);
            }else{
                 children.show();
                   $(this).html(`<i class="bi bi-folder-minus"></i>`);
            }

        });
    })
</script>